<template>
	<section>
		<headers txt="添加油卡"></headers>
		<ul class="mu20 wallfff">
			<li class="flex_middle hei100 sz30 plr30 bbtm" @click="oilType">
				<label class="mr50">类别</label>

				<input v-model="oiltype" class="flex1 sz30" type="text" placeholder="请选择油卡类别" readonly />
				<i class="iconfont icon-advance"></i>
			</li>
			<li class="flexs hei100 sz30 plr30 bbtm">
				<label for="oilnum" class="mr50 flex_self">卡号</label>
				<input id="oilnum" v-model="oilnum" class="flex1 sz30" type="text" placeholder="输入卡号" />
			</li>
		</ul>
		<button class="btns" type="button" @click="addoil">完成</button>
		<mt-popup v-model="oilflag" position="bottom" closeOnClickModal="false" class="w100">

			<p class="p30 bbtm sz30 centre">
				<span>选择油卡类型</span>
				<!--<span>关闭</span>-->
			</p>
			<ul>
				<li v-for="(item,index) in oilTypes" class="plr30 pud20 bbtm flex_between flex_middle" :data-i="index" @click="typeid">
					<strong class="sz30 fontwt">
						{{item.OilCardType_Name}}
					</strong>
					<!--:class="{oils:oils_class,oilc:oilc_class}"-->
					<span class="oils" :class="{oilc: oilc_class[index]}">  
						
					</span>
				</li>
			</ul>

		</mt-popup>
	</section>
</template>

<script>
	import { Popup } from 'mint-ui';
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import Qs from 'qs';
	export default {
		data() {
			return {
				oiltype: "",
				oilid: "",
				oilnum: "",
				oilTypes: [],
				oilflag: false,
				oilc_class: [],
			}
		},
		beforeCreate() {
			let v = this;
			v.$http.get("/WorkMembersOilCard/V1.0/GetOilType").then((res) => {
				v.oilTypes = res.data.Return_Data;
				v.oilTypes.forEach(function() {
					v.oilc_class.push(false);
				})
				
			});

		},
		methods: {
			oilType: function() {
				let v = this;
				v.oilflag = true;
			},
			typeid: function(e) {
				let v = this,
					ix = e.currentTarget.getAttribute("data-i");
				v.oilflag = false;
				v.oiltype = v.oilTypes[ix].OilCardType_Name;
				v.oilid   = v.oilTypes[ix].OilCardType_ID;
				
				v.oilc_class.forEach(function(item, index, arr) {
					arr[index] = false;
				});
				v.oilc_class[ix] = true;
			},
			addoil: function() {
				let v = this;
				if(!v.oilid) {
					Toast("请选择油卡类型");
				} else if(!v.oilnum) {
					Toast("请输入正确卡号");
				} else {
					Indicator.open({
						text: '请求中，请稍等'
					});
					this.$http.post("/WorkMembersOilCard/V1.0/AddOilCard", Qs.stringify({
						"MembersID": this.$store.state.MembersID,
						"OilCardType": v.oilid,
						"OilCardNum": v.oilnum

					})).then((res) => {
						Indicator.close();
						Toast(res.data.Return_Mess);

					}).catch((err) => {
						Indicator.close();
						Toast(err);
					});
				}
			}
		}
	}
</script>

<style scoped>
	.oils,
	.oilc {
		display: block;
		height: 0.5333333333rem;
		width: 0.5333333333rem;
	}
	
	.oils {
		background: url(../../../assets/Cardoil/default@3x.png) no-repeat;
		background-size: 100% 100%;
	}
	
	.oilc {
		background: url(../../../assets/Cardoil/select@3x.png) no-repeat;
		background-size: 100% 100%;
	}
</style>